<!-- <script setup lang="ts">
import { ElDialog, ElButton } from 'element-plus'
import { nextTick, ref, watch } from 'vue';
import TestJson from '../count.json'
import { createUniver, defaultTheme, LocaleType, Tools,FUniver } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import { UniverSheetsDataValidationPreset } from '@univerjs/presets/preset-sheets-data-validation'
import { UniverSheetsConditionalFormattingPreset } from '@univerjs/presets/preset-sheets-conditional-formatting'


import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
import UniverPresetSheetsDataValidationZhCN from '@univerjs/presets/preset-sheets-data-validation/locales/zh-CN'
import UniverPresetSheetsConditionalFormattingZhCN from '@univerjs/presets/preset-sheets-conditional-formatting/locales/zh-CN'
//@ts-ignore
import _ from 'lodash';
import '@univerjs/presets/lib/styles/preset-sheets-core.css';
import '@univerjs/presets/lib/styles/preset-sheets-data-validation.css'
import '@univerjs/presets/lib/styles/preset-sheets-conditional-formatting.css'
let univerAPI:FUniver;

function init(){
  const univer = createUniver({
    locale: LocaleType.ZH_CN,
    locales: {
      zhCN: Tools.deepMerge(
        {},
        UniverPresetSheetsCoreZhCN,
        UniverPresetSheetsDataValidationZhCN,
        UniverPresetSheetsConditionalFormattingZhCN
      )
    },
    theme: defaultTheme,
    presets: [
      UniverSheetsCorePreset({
        container: 'pre-view'
        // header: false,
        // contextMenu: false
      }),
      UniverSheetsDataValidationPreset(),
      UniverSheetsConditionalFormattingPreset()
    ]
  })
  univerAPI = univer.univerAPI
  // @ts-ignore
  univerAPI.createUniverSheet(_.cloneDeep(TestJson))
}

const dialogVisible = ref(false)

const open = () => {
  dialogVisible.value = true
  nextTick(()=>{
    init()
  })
}
const close = () => {
  const activeWorkbook = univerAPI?.getActiveWorkbook()
  const unitId = activeWorkbook && activeWorkbook.getId()
  if(unitId){
    univerAPI.disposeUnit(unitId)
    console.log("销毁工作薄！")
  }
}
watch(()=> dialogVisible.value, (value)=>{
  if(!value){
    close()
  }
})
</script>

<template>
  <div>
    <ElButton @click="open">打开</ElButton>
  </div>
  <ElDialog v-model="dialogVisible" width="1200px">
    <div id="pre-view"></div>
  </ElDialog>
</template>

<style scoped>
 #pre-view{
  /* width: 75vw; */
  height: 80vh;
 }
</style> -->

<template>
  <div>空白页</div>
</template>